// 图表分类数据 - 每个类型包含5-10个案例
const chartCategories = {
    'flow': {
        name: '流程图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="2" y="2" width="20" height="20" rx="2" />
                <path d="M7 10h10M7 14h10M10 7l4 4-4 4" />
            </svg>`,
        demos: [
            {
                id: 'flow-basic',
                title: '基础流程图',
                description: '简单的线性流程',
                code: `graph TD
    A[开始] --> B[处理数据]
    B --> C{是否有效?}
    C -->|是| D[保存结果]
    C -->|否| E[重新处理]
    D --> F[结束]
    E --> B`
            },
            {
                id: 'flow-decision',
                title: '决策流程图',
                description: '包含复杂决策分支的业务流程示例',
                code: `graph TD
    A[用户登录] --> B{验证成功?}
    B -->|是| C[显示主界面]
    B -->|否| D[显示错误信息]
    C --> E[用户操作]
    E --> F{操作类型?}
    F -->|查询| G[执行查询]
    F -->|修改| H[执行修改]
    F -->|删除| I[执行删除]
    G --> J[显示结果]
    H --> J
    I --> J
    J --> E`
            },
            {
                id: 'flow-system',
                title: '系统流程图',
                description: '展示系统组件间交互的系统级流程图',
                code: `graph TD
    A[用户请求] --> B[前端界面]
    B --> C[API网关]
    C --> D{请求类型?}
    D -->|认证| E[认证服务]
    D -->|业务| F[业务服务]
    D -->|文件| G[文件服务]
    E --> H[返回令牌]
    F --> I[处理业务逻辑]
    G --> J[处理文件上传]
    H --> C
    I --> C
    J --> C
    C --> B
    B --> A`
            },
            {
                id: 'flow-workflow',
                title: '工作流流程图',
                description: '企业级工作流审批流程示例',
                code: `graph TD
    A[提交申请] --> B[部门审批]
    B --> C{部门通过?}
    C -->|是| D[财务审批]
    C -->|否| Z[申请驳回]
    D --> E{财务通过?}
    E -->|是| F[总经理审批]
    E -->|否| Z
    F --> G{总经理通过?}
    G -->|是| H[执行采购]
    G -->|否| Z
    H --> I[完成采购]
    I --> J[归档记录]`
            },
            {
                id: 'flow-data',
                title: '数据处理流程',
                description: '大数据处理和分析的完整流程',
                code: `graph TD
    A[数据源] --> B[数据采集]
    B --> C[数据清洗]
    C --> D[数据转换]
    D --> E[数据存储]
    E --> F[数据分析]
    F --> G{分析结果?}
    G -->|正常| H[生成报告]
    G -->|异常| I[告警处理]
    H --> J[报告分发]
    I --> K[人工干预]
    K --> C
    J --> L[流程结束]`
            },
            {
                id: 'flow-devops',
                title: 'DevOps部署流程',
                description: '持续集成和持续部署的完整流程',
                code: `graph TD
    A[开发提交代码] --> B[代码审查]
    B --> C{审查通过?}
    C -->|是| D[自动构建]
    C -->|否| A
    D --> E[单元测试]
    E --> F{测试通过?}
    F -->|是| G[打包镜像]
    F -->|否| H[通知开发]
    G --> I[部署测试环境]
    I --> J[集成测试]
    J --> K{测试通过?}
    K -->|是| L[部署生产]
    K -->|否| H
    L --> M[监控验证]
    M --> N[流程完成]`
            },
            {
                id: 'flow-incident',
                title: '故障处理流程',
                description: '技术团队处理线上故障的标准流程',
                code: `graph TD
    A[监控告警] --> B[故障确认]
    B --> C[启动应急预案]
    C --> D[故障定位]
    D --> E{是否可快速恢复?}
    E -->|是| F[执行恢复]
    E -->|否| G[深入分析]
    F --> H[验证恢复]
    G --> I[制定修复方案]
    I --> J[方案评审]
    J --> F
    H --> K[故障复盘]
    K --> L[改进措施]
    L --> M[流程结束]`
            },
            {
                id: 'flow-recruitment',
                title: '技术招聘流程',
                description: '技术团队人才招聘的完整流程',
                code: `graph TD
    A[需求申请] --> B[职位发布]
    B --> C[简历筛选]
    C --> D[技术面试]
    D --> E{技术通过?}
    E -->|是| F[综合面试]
    E -->|否| G[简历库]
    F --> H{综合通过?}
    H -->|是| I[HR面试]
    H -->|否| G
    I --> J{HR通过?}
    J -->|是| K[发放Offer]
    J -->|否| G
    K --> L[入职办理]
    L --> M[流程完成]`
            }
        ]
    },
    'sequence': {
        name: '序列图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
            </svg>`,
        demos: [
            {
                id: 'sequence-login',
                title: '用户登录序列',
                description: '用户登录系统的完整交互时序',
                code: `sequenceDiagram
    participant 用户
    participant 前端
    participant 认证服务
    participant 用户服务
    participant 数据库
    
    用户->>前端: 输入用户名密码
    前端->>认证服务: 发送认证请求
    认证服务->>数据库: 查询用户信息
    数据库-->>认证服务: 返回用户数据
    认证服务-->>前端: 返回认证结果
    前端->>用户服务: 获取用户详情
    用户服务-->>前端: 返回用户信息
    前端-->>用户: 显示主界面`
            },
            {
                id: 'sequence-payment',
                title: '支付流程序列',
                description: '在线支付系统的交互时序图',
                code: `sequenceDiagram
    participant 用户
    participant 商户系统
    participant 支付网关
    participant 银行系统
    participant 风控系统
    
    用户->>商户系统: 提交订单
    商户系统->>支付网关: 创建支付请求
    支付网关->>风控系统: 风险评估
    风控系统-->>支付网关: 风险评估结果
    支付网关->>银行系统: 扣款请求
    银行系统-->>支付网关: 扣款结果
    支付网关-->>商户系统: 支付结果
    商户系统-->>用户: 支付成功通知`
            },
            {
                id: 'sequence-deployment',
                title: '系统部署序列',
                description: '自动化部署系统的交互时序',
                code: `sequenceDiagram
    participant 开发人员
    participant CI系统
    participant 代码仓库
    participant 构建服务器
    participant 测试环境
    participant 生产环境
    
    开发人员->>代码仓库: 推送代码
    代码仓库->>CI系统: 触发构建
    CI系统->>构建服务器: 开始构建
    构建服务器-->>CI系统: 构建完成
    CI系统->>测试环境: 部署测试版本
    测试环境-->>CI系统: 部署成功
    CI系统->>CI系统: 运行自动化测试
    CI系统-->>开发人员: 测试结果通知
    开发人员->>CI系统: 确认发布
    CI系统->>生产环境: 部署生产版本
    生产环境-->>CI系统: 部署完成
    CI系统-->>开发人员: 发布成功通知`
            },
            {
                id: 'sequence-microservice',
                title: '微服务调用序列',
                description: '微服务架构中的服务调用时序',
                code: `sequenceDiagram
    participant 客户端
    participant API网关
    participant 认证服务
    participant 订单服务
    participant 库存服务
    participant 支付服务
    participant 消息服务
    
    客户端->>API网关: 创建订单请求
    API网关->>认证服务: 验证令牌
    认证服务-->>API网关: 验证通过
    API网关->>订单服务: 创建订单
    订单服务->>库存服务: 检查库存
    库存服务-->>订单服务: 库存充足
    订单服务->>支付服务: 发起支付
    支付服务-->>订单服务: 支付成功
    订单服务->>消息服务: 发送通知
    消息服务-->>订单服务: 通知已发送
    订单服务-->>API网关: 订单创建成功
    API网关-->>客户端: 返回订单结果`
            },
            {
                id: 'sequence-support',
                title: '技术支持序列',
                description: '客户技术支持问题的处理流程',
                code: `sequenceDiagram
    participant 客户
    participant 客服系统
    participant 一线支持
    participant 二线支持
    participant 开发团队
    participant 产品经理
    
    客户->>客服系统: 提交问题
    客服系统->>一线支持: 分配工单
    一线支持->>客户: 初步沟通
    客户-->>一线支持: 提供详细信息
    一线支持->>一线支持: 尝试解决
    一线支持->>二线支持: 升级问题
    二线支持->>开发团队: 技术咨询
    开发团队-->>二线支持: 技术方案
    二线支持->>产品经理: 确认需求
    产品经理-->>二线支持: 需求确认
    二线支持->>客户: 提供解决方案
    客户-->>二线支持: 确认解决
    二线支持->>客服系统: 关闭工单`
            },
            {
                id: 'sequence-data-sync',
                title: '数据同步序列',
                description: '多系统间数据同步的时序流程',
                code: `sequenceDiagram
    participant 主系统
    participant 消息队列
    participant 数据处理器
    participant 子系统A
    participant 子系统B
    participant 监控系统
    
    主系统->>消息队列: 发布数据变更
    消息队列->>数据处理器: 消费消息
    数据处理器->>数据处理器: 数据转换
    数据处理器->>子系统A: 同步数据
    子系统A-->>数据处理器: 同步确认
    数据处理器->>子系统B: 同步数据
    子系统B-->>数据处理器: 同步确认
    数据处理器->>监控系统: 上报同步状态
    监控系统-->>数据处理器: 状态确认
    数据处理器->>消息队列: 确认消费完成`
            }
        ]
    },
    'class': {
        name: '类图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                <line x1="8" y1="21" x2="16" y2="21" />
                <line x1="12" y1="17" x2="12" y2="21" />
            </svg>`,
        demos: [
            {
                id: 'class-oo',
                title: '面向对象类图',
                description: '展示继承、接口实现等面向对象关系',
                code: `classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
        +void sleep()
    }
    
    class Mammal {
        +boolean hasFur
        +void giveBirth()
    }
    
    class Bird {
        +boolean canFly
        +void fly()
    }
    
    class Dog {
        +String breed
        +void bark()
    }
    
    class Cat {
        +String color
        +void meow()
    }
    
    Animal <|-- Mammal
    Animal <|-- Bird
    Mammal <|-- Dog
    Mammal <|-- Cat`
            },
            {
                id: 'class-ecommerce',
                title: '电商系统类图',
                description: '电商平台的核心领域模型',
                code: `classDiagram
    class User {
        +String userId
        +String username
        +String email
        +Date createdAt
        +createOrder() Order
        +updateProfile() boolean
    }
    
    class Order {
        +String orderId
        +BigDecimal totalAmount
        +String status
        +Date createTime
        +calculateTotal() BigDecimal
        +updateStatus() void
    }
    
    class Product {
        +String productId
        +String name
        +BigDecimal price
        +Integer stock
        +updateStock() boolean
        +getPrice() BigDecimal
    }
    
    class Category {
        +String categoryId
        +String name
        +String description
        +addProduct() void
        +removeProduct() void
    }
    
    class Payment {
        +String paymentId
        +BigDecimal amount
        +String method
        +processPayment() boolean
        +refund() boolean
    }
    
    User "1" -- "*" Order : places
    Order "*" -- "*" Product : contains
    Product "*" -- "1" Category : belongs_to
    Order "1" -- "1" Payment : has`
            },
            {
                id: 'class-microservice',
                title: '微服务类图',
                description: '微服务架构中的服务类设计',
                code: `classDiagram
    class ApiGateway {
        +routeRequest() Response
        +authenticate() boolean
        +rateLimit() boolean
    }
    
    class UserService {
        +User getUser()
        +createUser() User
        +updateUser() boolean
        +validateCredentials() boolean
    }
    
    class OrderService {
        +Order createOrder()
        +getOrder() Order
        +updateOrder() boolean
        +cancelOrder() boolean
    }
    
    class ProductService {
        +Product getProduct()
        +searchProducts() List~Product~
        +updateInventory() boolean
    }
    
    class NotificationService {
        +sendEmail() boolean
        +sendSMS() boolean
        +pushNotification() boolean
    }
    
    class ServiceRegistry {
        +registerService() void
        +discoverService() ServiceInfo
        +healthCheck() boolean
    }
    
    ApiGateway --> UserService : calls
    ApiGateway --> OrderService : calls
    ApiGateway --> ProductService : calls
    OrderService --> NotificationService : calls`
            },
            {
                id: 'class-project',
                title: '项目管理类图',
                description: '项目管理系统的核心类设计',
                code: `classDiagram
    class Project {
        +String projectId
        +String name
        +String description
        +Date startDate
        +Date endDate
        +String status
        +addTask() void
        +calculateProgress() double
    }
    
    class Task {
        +String taskId
        +String title
        +String description
        +String priority
        +String status
        +Date dueDate
        +assignUser() void
        +updateProgress() void
    }
    
    class TeamMember {
        +String memberId
        +String name
        +String role
        +String email
        +assignTask() void
        +updateAvailability() void
    }
    
    class Resource {
        +String resourceId
        +String name
        +String type
        +double quantity
        +allocate() boolean
        +release() void
    }
    
    class Milestone {
        +String milestoneId
        +String name
        +Date targetDate
        +boolean achieved
        +markComplete() void
    }
    
    Project "1" -- "*" Task : contains
    Project "1" -- "*" Milestone : has
    Task "*" -- "*" TeamMember : assigned_to
    Project "*" -- "*" Resource : uses`
            },
            {
                id: 'class-auth',
                title: '权限系统类图',
                description: '基于角色的权限控制系统',
                code: `classDiagram
    class User {
        +String userId
        +String username
        +String passwordHash
        +boolean enabled
        +login() boolean
        +logout() void
    }
    
    class Role {
        +String roleId
        +String roleName
        +String description
        +addPermission() void
        +removePermission() void
    }
    
    class Permission {
        +String permissionId
        +String resource
        +String action
        +String description
        +checkAccess() boolean
    }
    
    class UserProfile {
        +String profileId
        +String firstName
        +String lastName
        +String email
        +updateProfile() boolean
    }
    
    class Session {
        +String sessionId
        +Date createdAt
        +Date expiresAt
        +boolean isValid
        +refresh() void
        +invalidate() void
    }
    
    User "1" -- "*" Role : has
    Role "*" -- "*" Permission : grants
    User "1" -- "1" UserProfile : has
    User "1" -- "*" Session : maintains`
            }
        ]
    },
    'gantt': {
        name: '甘特图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                <line x1="8" y1="21" x2="16" y2="21" />
                <line x1="12" y1="17" x2="12" y2="21" />
                <rect x="4" y="5" width="2" height="8" />
                <rect x="8" y="5" width="2" height="10" />
                <rect x="12" y="5" width="2" height="6" />
                <rect x="16" y="5" width="2" height="12" />
            </svg>`,
        demos: [
            {
                id: 'gantt-project',
                title: '项目开发甘特图',
                description: '软件开发项目的完整时间安排',
                code: `gantt
    title 软件开发项目计划
    dateFormat  YYYY-MM-DD
    
    section 需求阶段
    需求调研     :done,    req1, 2024-01-01, 7d
    需求分析     :active,  req2, after req1, 5d
    需求评审     :         req3, after req2, 3d
    
    section 设计阶段
    技术设计     :         des1, after req3, 10d
    界面设计     :         des2, after req3, 8d
    
    section 开发阶段
    前端开发     :         dev1, after des1, 15d
    后端开发     :         dev2, after des1, 20d
    测试开发     :         dev3, after des1, 10d
    
    section 测试阶段
    单元测试     :         test1, after dev1, 7d
    集成测试     :         test2, after test1, 5d
    系统测试     :         test3, after test2, 10d`
            },
            {
                id: 'gantt-product',
                title: '产品发布甘特图',
                description: '新产品从规划到上线的完整时间线',
                code: `gantt
    title 新产品发布计划
    dateFormat  YYYY-MM-DD
    
    section 产品规划
    市场调研     :done,    market, 2024-02-01, 10d
    竞品分析     :done,    compete, after market, 7d
    产品定义     :active,  define, after compete, 14d
    
    section 设计开发
    UI/UX设计    :         design, after define, 21d
    技术架构     :         arch, after define, 10d
    核心开发     :         core, after arch, 45d
    功能测试     :         test, after core, 21d
    
    section 发布准备
    用户测试     :         uat, after test, 14d
    文档编写     :         doc, after test, 21d
    营销材料     :         marketing, after uat, 14d
    正式发布     :         release, after doc, 1d`
            },
            {
                id: 'gantt-migration',
                title: '系统迁移甘特图',
                description: '旧系统到新系统的迁移计划',
                code: `gantt
    title 系统迁移项目计划
    dateFormat  YYYY-MM-DD
    
    section 准备阶段
    环境准备     :done,    env, 2024-03-01, 7d
    数据备份     :done,    backup, after env, 3d
    迁移方案     :active,  plan, after backup, 10d
    
    section 迁移执行
    用户数据迁移 :         user, after plan, 5d
    业务数据迁移 :         biz, after user, 7d
    配置迁移     :         config, after biz, 3d
    
    section 验证阶段
    功能验证     :         func, after config, 5d
    性能测试     :         perf, after func, 3d
    用户验收     :         uat, after perf, 7d
    
    section 上线后
    监控观察     :         monitor, after uat, 14d
    问题修复     :         fix, after uat, 21d`
            },
            {
                id: 'gantt-team',
                title: '团队任务甘特图',
                description: '多团队协作的项目任务分配',
                code: `gantt
    title 跨团队协作项目计划
    dateFormat  YYYY-MM-DD
    
    section 前端团队
    组件库开发   :done,    comp, 2024-04-01, 14d
    页面开发     :         page, after comp, 21d
    交互优化     :         ui, after page, 7d
    
    section 后端团队
    接口设计     :done,    api, 2024-04-01, 7d
    业务逻辑     :         logic, after api, 28d
    性能优化     :         opt, after logic, 10d
    
    section 测试团队
    测试用例     :         case, after api, 14d
    功能测试     :         func, after page, 21d
    集成测试     :         integ, after logic, 14d
    
    section 运维团队
    环境部署     :         deploy, after integ, 3d
    监控配置     :         monitor, after deploy, 5d`
            },
            {
                id: 'gantt-agile',
                title: '敏捷迭代甘特图',
                description: '敏捷开发的多迭代计划',
                code: `gantt
    title 敏捷开发迭代计划
    dateFormat  YYYY-MM-DD
    
    section 迭代1
    用户认证     :done,    auth, 2024-05-01, 7d
    基础页面     :done,    base, after auth, 7d
    数据管理     :done,    data, after base, 7d
    
    section 迭代2
    高级功能     :active,  adv, 2024-05-22, 14d
    性能优化     :         perf, after adv, 7d
    安全加固     :         sec, after adv, 7d
    
    section 迭代3
    移动端适配   :         mobile, 2024-06-12, 14d
    第三方集成   :         third, after mobile, 7d
    用户体验优化 :         ux, after mobile, 7d
    
    section 发布
    最终测试     :         final, 2024-07-03, 7d
    生产部署     :         prod, after final, 2d`
            }
        ]
    },
    'pie': {
        name: '饼图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <path d="M12 2 12 12l8 5" />
            </svg>`,
        demos: [
            {
                id: 'pie-market',
                title: '市场份额饼图',
                description: '各产品市场份额分布情况',
                code: `pie title 2024年市场份额分布
    "产品A" : 35.5
    "产品B" : 28.3
    "产品C" : 19.7
    "产品D" : 12.1
    "其他" : 4.4`
            },
            {
                id: 'pie-team',
                title: '团队技能分布',
                description: '技术团队成员技能分布情况',
                code: `pie title 技术团队技能分布
    "前端开发" : 25
    "后端开发" : 30
    "移动开发" : 15
    "测试工程师" : 12
    "运维工程师" : 10
    "产品设计" : 8`
            },
            {
                id: 'pie-budget',
                title: '项目预算分配',
                description: 'IT项目各项预算的分配比例',
                code: `pie title 年度IT项目预算分配
    "人力成本" : 45
    "硬件设备" : 20
    "软件许可" : 15
    "云服务" : 12
    "培训认证" : 5
    "应急储备" : 3`
            },
            {
                id: 'pie-bug',
                title: '缺陷分布分析',
                description: '软件缺陷按模块分布情况',
                code: `pie title 系统缺陷模块分布
    "用户管理" : 28
    "订单处理" : 22
    "支付模块" : 18
    "库存管理" : 15
    "报表系统" : 12
    "其他模块" : 5`
            },
            {
                id: 'pie-time',
                title: '时间投入分布',
                description: '开发团队时间投入分布',
                code: `pie title 开发时间分布
    "新功能开发" : 35
    "Bug修复" : 25
    "代码重构" : 15
    "技术债务" : 12
    "会议沟通" : 8
    "学习研究" : 5`
            }
        ]
    },
    'state': {
        name: '状态图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <circle cx="12" cy="12" r="4" />
                <line x1="4.93" y1="4.93" x2="9.17" y2="9.17" />
                <line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
                <line x1="14.83" y1="9.17" x2="19.07" y2="4.93" />
                <line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
            </svg>`,
        demos: [
            {
                id: 'state-order',
                title: '订单状态图',
                description: '电商订单的完整状态转换流程',
                code: `stateDiagram-v2
    [*] --> 待支付
    待支付 --> 已支付 : 用户支付
    已支付 --> 已发货 : 商家发货
    已发货 --> 已完成 : 用户确认收货
    已支付 --> 已取消 : 用户取消
    已发货 --> 退款中 : 用户申请退款
    退款中 --> 已退款 : 退款成功
    退款中 --> 已发货 : 退款驳回
    已完成 --> [*]
    已取消 --> [*]
    已退款 --> [*]`
            },
            {
                id: 'state-task',
                title: '任务状态图',
                description: '项目管理中任务的状态流转',
                code: `stateDiagram-v2
    [*] --> 待分配
    待分配 --> 进行中 : 分配负责人
    进行中 --> 已完成 : 完成任务
    进行中 --> 已阻塞 : 遇到障碍
    已阻塞 --> 进行中 : 问题解决
    进行中 --> 待审核 : 提交审核
    待审核 --> 已完成 : 审核通过
    待审核 --> 进行中 : 审核驳回
    已完成 --> [*]`
            },
            {
                id: 'state-user',
                title: '用户账户状态',
                description: '用户账户生命周期状态管理',
                code: `stateDiagram-v2
    [*] --> 未激活
    未激活 --> 正常 : 邮箱验证
    正常 --> 冻结 : 多次密码错误
    正常 --> 禁用 : 违反规则
    正常 --> 注销 : 用户申请
    冻结 --> 正常 : 重置密码
    禁用 --> 正常 : 管理员解禁
    注销 --> [*]
    冻结 --> 注销 : 长期未处理
    禁用 --> 注销 : 管理员操作`
            },
            {
                id: 'state-deployment',
                title: '部署状态图',
                description: '应用部署的各阶段状态',
                code: `stateDiagram-v2
    [*] --> 构建中
    构建中 --> 构建成功 : 编译通过
    构建中 --> 构建失败 : 编译错误
    构建成功 --> 测试中 : 部署测试环境
    测试中 --> 测试通过 : 自动化测试
    测试中 --> 测试失败 : 测试未通过
    测试通过 --> 预发布 : 部署预发布
    预发布 --> 生产就绪 : 验收通过
    生产就绪 --> 运行中 : 部署生产
    运行中 --> 已回滚 : 出现问题
    运行中 --> 已停止 : 服务下线
    已回滚 --> 运行中 : 重新部署
    已停止 --> [*]`
            },
            {
                id: 'state-incident',
                title: '故障状态图',
                description: '故障处理的全生命周期状态',
                code: `stateDiagram-v2
    [*] --> 已发现
    已发现 --> 调查中 : 开始分析
    调查中 --> 已确认 : 定位原因
    已确认 --> 修复中 : 开始修复
    修复中 --> 已解决 : 修复完成
    已解决 --> 已关闭 : 验证通过
    调查中 --> 已关闭 : 误报
    修复中 --> 调查中 : 修复无效
    已解决 --> 修复中 : 问题复现
    已关闭 --> [*]`
            }
        ]
    },
    'er': {
        name: 'ER图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <line x1="8" y1="16" x2="16" y2="16" />
                <line x1="8" y1="12" x2="16" y2="12" />
                <line x1="12" y1="8" x2="12" y2="8" />
                <line x1="21" y1="5" x2="19" y2="7" />
                <line x1="21" y1="19" x2="19" y2="17" />
                <line x1="3" y1="5" x2="5" y2="7" />
                <line x1="3" y1="19" x2="5" y2="17" />
            </svg>`,
        demos: [
            {
                id: 'er-ecommerce',
                title: '电商系统ER图',
                description: '电商平台的核心数据模型',
                code: `erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string customer_id PK
        string name
        string email
        string phone
    }
    
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        string order_id PK
        date order_date
        decimal total_amount
    }
    
    PRODUCT ||--|{ ORDER_ITEM : includes
    PRODUCT {
        string product_id PK
        string product_name
        decimal price
        int stock
    }
    
    CATEGORY ||--o{ PRODUCT : belongs_to
    CATEGORY {
        string category_id PK
        string category_name
    }`
            },
            {
                id: 'er-hr',
                title: '人力资源ER图',
                description: '企业人力资源管理系统数据模型',
                code: `erDiagram
    DEPARTMENT ||--o{ EMPLOYEE : has
    DEPARTMENT {
        string dept_id PK
        string dept_name
        string manager_id FK
    }
    
    EMPLOYEE ||--o{ ATTENDANCE : records
    EMPLOYEE {
        string emp_id PK
        string name
        string position
        date hire_date
        decimal salary
    }
    
    EMPLOYEE ||--o{ SALARY : receives
    SALARY {
        string salary_id PK
        string emp_id FK
        date pay_date
        decimal amount
    }
    
    PROJECT ||--o{ ASSIGNMENT : requires
    PROJECT {
        string project_id PK
        string project_name
        date start_date
        date end_date
    }
    
    EMPLOYEE }o--o{ PROJECT : works_on
    ASSIGNMENT {
        string assign_id PK
        string emp_id FK
        string project_id FK
        string role
    }`
            },
            {
                id: 'er-cms',
                title: '内容管理系统ER图',
                description: '内容管理系统的核心数据关系',
                code: `erDiagram
    USER ||--o{ CONTENT : creates
    USER {
        string user_id PK
        string username
        string email
        string role
    }
    
    CONTENT ||--|| CATEGORY : belongs_to
    CONTENT {
        string content_id PK
        string title
        string body
        string status
        date created_at
    }
    
    CATEGORY ||--o{ CONTENT : contains
    CATEGORY {
        string category_id PK
        string name
        string description
    }
    
    CONTENT ||--o{ COMMENT : has
    COMMENT {
        string comment_id PK
        string content_id FK
        string user_id FK
        string comment_text
        date created_at
    }
    
    TAG }o--o{ CONTENT : tagged_with
    TAG {
        string tag_id PK
        string tag_name
    }`
            },
            {
                id: 'er-inventory',
                title: '库存管理ER图',
                description: '企业库存管理系统数据模型',
                code: `erDiagram
    WAREHOUSE ||--o{ INVENTORY : stores
    WAREHOUSE {
        string warehouse_id PK
        string name
        string location
    }
    
    PRODUCT ||--o{ INVENTORY : has
    PRODUCT {
        string product_id PK
        string name
        string description
        decimal cost_price
        decimal selling_price
    }
    
    INVENTORY {
        string inventory_id PK
        string product_id FK
        string warehouse_id FK
        int quantity
        date last_updated
    }
    
    SUPPLIER ||--o{ PURCHASE_ORDER : supplies
    SUPPLIER {
        string supplier_id PK
        string name
        string contact
    }
    
    PURCHASE_ORDER ||--|{ ORDER_ITEM : contains
    PURCHASE_ORDER {
        string order_id PK
        string supplier_id FK
        date order_date
        string status
    }
    
    PRODUCT ||--o{ ORDER_ITEM : included_in
    ORDER_ITEM {
        string item_id PK
        string order_id FK
        string product_id FK
        int quantity
        decimal unit_price
    }`
            },
            {
                id: 'er-project',
                title: '项目管理ER图',
                description: '项目管理系统数据关系模型',
                code: `erDiagram
    PROJECT ||--o{ TASK : contains
    PROJECT {
        string project_id PK
        string name
        string description
        date start_date
        date end_date
        string status
    }
    
    TASK ||--|| TEAM_MEMBER : assigned_to
    TASK {
        string task_id PK
        string project_id FK
        string title
        string description
        string priority
        string status
        date due_date
    }
    
    TEAM_MEMBER ||--|| DEPARTMENT : belongs_to
    TEAM_MEMBER {
        string member_id PK
        string name
        string role
        string email
    }
    
    DEPARTMENT ||--o{ TEAM_MEMBER : has
    DEPARTMENT {
        string dept_id PK
        string name
    }
    
    PROJECT ||--o{ MILESTONE : has
    MILESTONE {
        string milestone_id PK
        string project_id FK
        string name
        date target_date
        boolean achieved
    }
    
    TASK ||--o{ TIME_ENTRY : tracked_by
    TIME_ENTRY {
        string entry_id PK
        string task_id FK
        string member_id FK
        date work_date
        decimal hours
    }`
            }
        ]
    },
    'journey': {
        name: '用户旅程',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="6" cy="12" r="2" />
                <circle cx="12" cy="12" r="2" />
                <circle cx="18" cy="12" r="2" />
                <line x1="8" y1="12" x2="10" y2="12" />
                <line x1="14" y1="12" x2="16" y2="12" />
                <path d="M12 8v8" />
            </svg>`,
        demos: [
            {
                id: 'journey-shopping',
                title: '购物用户旅程',
                description: '用户从发现到购买的完整旅程',
                code: `journey
    title 用户购物旅程
    section 发现阶段
      浏览首页: 5: 用户
      搜索商品: 4: 用户
      查看推荐: 3: 系统
    section 决策阶段
      比较商品: 5: 用户
      查看评价: 4: 用户
      咨询客服: 3: 客服
    section 购买阶段
      加入购物车: 4: 用户
      结算支付: 5: 用户
      等待收货: 3: 物流
    section 售后阶段
      确认收货: 4: 用户
      评价商品: 3: 用户
      售后服务: 2: 客服`
            },
            {
                id: 'journey-onboarding',
                title: '新用户引导旅程',
                description: '新用户注册和产品上手的完整体验',
                code: `journey
    title 新用户引导旅程
    section 注册阶段
      访问官网: 5: 潜在用户
      浏览介绍: 4: 潜在用户
      点击注册: 5: 潜在用户
      填写信息: 3: 新用户
      邮箱验证: 4: 新用户
    section 上手阶段
      欢迎引导: 5: 系统
      功能导览: 4: 系统
      首次任务: 5: 新用户
      完成目标: 5: 新用户
    section 激活阶段
      探索功能: 4: 活跃用户
      邀请好友: 3: 活跃用户
      升级账户: 2: 付费用户
      持续使用: 5: 忠实用户`
            },
            {
                id: 'journey-support',
                title: '技术支持旅程',
                description: '用户寻求技术支持的完整体验',
                code: `journey
    title 技术支持用户旅程
    section 问题发现
      遇到问题: 5: 用户
      自助解决: 3: 用户
      搜索文档: 4: 用户
    section 寻求帮助
      联系客服: 5: 用户
      描述问题: 4: 用户
      提供信息: 3: 用户
    section 解决方案
      初步诊断: 4: 客服
      深入分析: 3: 技术
      提供方案: 5: 技术
      实施解决: 4: 用户
    section 后续跟进
      验证解决: 5: 用户
      满意度调查: 3: 系统
      知识库更新: 2: 技术`
            },
            {
                id: 'journey-product',
                title: '产品使用旅程',
                description: '用户深度使用产品的完整旅程',
                code: `journey
    title 产品深度使用旅程
    section 初次接触
      了解产品: 4: 访客
      注册试用: 5: 新用户
      基础操作: 3: 新用户
    section 日常使用
      登录系统: 5: 活跃用户
      处理任务: 5: 活跃用户
      使用功能: 4: 活跃用户
      保存数据: 5: 活跃用户
    section 高级使用
      探索高级功能: 3: 资深用户
      自定义设置: 4: 资深用户
      集成其他工具: 2: 资深用户
    section 价值实现
      达成目标: 5: 成功用户
      分享经验: 3: 成功用户
      推荐他人: 4: 成功用户`
            },
            {
                id: 'journey-mobile',
                title: '移动应用旅程',
                description: '移动应用用户的完整使用旅程',
                code: `journey
    title 移动应用用户旅程
    section 下载安装
      应用商店发现: 4: 潜在用户
      查看评价: 3: 潜在用户
      下载应用: 5: 新用户
      权限授权: 3: 新用户
    section 首次使用
      欢迎界面: 4: 系统
      个性化设置: 3: 用户
      核心功能体验: 5: 用户
    section 日常互动
      推送通知: 3: 系统
      快速操作: 5: 活跃用户
      社交分享: 2: 活跃用户
    section 深度参与
      内容创作: 4: 资深用户
      社区互动: 3: 资深用户
      内购消费: 2: 付费用户`
            }
        ]
    },
    'mindmap': {
        name: '思维导图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="2" />
                <path d="M12 2v8M12 14v8M2 12h8M14 12h8M6 6l4 4M14 14l4 4M6 18l4-4M14 6l4 4" />
            </svg>`,
        demos: [
            {
                id: 'mindmap-project',
                title: '项目管理思维导图',
                description: '项目管理的完整知识体系',
                code: `mindmap
  root((项目管理))
    项目启动
      需求分析
      项目规划
      团队组建
    项目执行
      进度管理
      质量管理
      风险管理
      沟通管理
    项目监控
      绩效评估
      变更控制
      问题跟踪
    项目收尾
      验收交付
      总结复盘
      文档归档`
            },
            {
                id: 'mindmap-product',
                title: '产品规划思维导图',
                description: '产品经理的产品规划思路',
                code: `mindmap
  root((产品规划))
    市场分析
      目标用户
      竞品分析
      市场趋势
    产品定义
      产品愿景
      核心功能
      差异化优势
    功能设计
      用户故事
      功能列表
      交互设计
    技术实现
      技术架构
      开发计划
      技术风险
    上线运营
      发布策略
      用户反馈
      迭代计划`
            },
            {
                id: 'mindmap-architecture',
                title: '系统架构思维导图',
                description: '技术总监的系统架构设计思路',
                code: `mindmap
  root((系统架构))
    业务架构
      业务流程
      业务领域
      业务规则
    应用架构
      微服务划分
      接口设计
      数据流
    技术架构
      技术选型
      框架选择
      中间件
    数据架构
      数据模型
      存储方案
      数据安全
    部署架构
      环境规划
      部署策略
      监控方案
    安全架构
      身份认证
      数据加密
      安全审计`
            },
            {
                id: 'mindmap-team',
                title: '团队建设思维导图',
                description: '技术团队建设的完整框架',
                code: `mindmap
  root((团队建设))
    人才招聘
      岗位定义
      面试流程
      录用标准
    团队结构
      角色分工
      汇报关系
      协作机制
    技能发展
      技术培训
      职业规划
      知识分享
    团队文化
      价值观
      工作方式
      团队活动
    绩效管理
      目标设定
      绩效评估
      激励机制
    工具支持
      开发工具
      协作平台
      自动化工具`
            },
            {
                id: 'mindmap-quality',
                title: '质量保障思维导图',
                description: '软件质量保障的完整体系',
                code: `mindmap
  root((质量保障))
    代码质量
      编码规范
      代码审查
      静态分析
    测试策略
      单元测试
      集成测试
      系统测试
      性能测试
    自动化
      自动化测试
      CI/CD
      监控告警
    流程规范
      开发流程
      测试流程
      发布流程
    质量度量
      缺陷密度
      测试覆盖率
      性能指标
    持续改进
      根本原因分析
      经验总结
      最佳实践`
            }
        ]
    },
    'timeline': {
        name: '时间线',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>`,
        demos: [
            {
                id: 'timeline-tech',
                title: '技术发展时间线',
                description: '信息技术发展的关键里程碑',
                code: `timeline
    title 信息技术发展历程
    
    1940s : 电子计算机诞生
    1960s : 互联网前身ARPANET
    1980s : 个人电脑普及
    1990s : 万维网诞生
    2000s : 移动互联网兴起
    2010s : 云计算大数据
    2020s : AI与物联网时代`
            },
            {
                id: 'timeline-project',
                title: '项目里程碑时间线',
                description: '大型项目的关键里程碑时间线',
                code: `timeline
    title 数字化转型项目里程碑
    
    2024 Q1 : 项目启动<br>组建团队
    2024 Q2 : 需求分析完成<br>架构设计
    2024 Q3 : 核心模块开发<br>内部测试
    2024 Q4 : 用户验收测试<br>数据迁移
    2025 Q1 : 系统上线<br>用户培训
    2025 Q2 : 优化迭代<br>性能调优
    2025 Q3 : 项目验收<br>总结复盘`
            },
            {
                id: 'timeline-product',
                title: '产品版本时间线',
                description: '产品各主要版本的发布时间线',
                code: `timeline
    title 产品版本发展历程
    
    v1.0 : 基础版本发布<br>核心功能
    v1.5 : 性能优化<br>用户体验改进
    v2.0 : 架构重构<br>新增高级功能
    v2.5 : 移动端支持<br>API开放
    v3.0 : AI功能集成<br>生态系统建设
    v3.5 : 国际化版本<br>多语言支持`
            },
            {
                id: 'timeline-career',
                title: '职业发展时间线',
                description: '技术人员的职业发展路径',
                code: `timeline
    title 技术职业发展路径
    
    初级工程师 : 掌握基础技能<br>参与模块开发
    中级工程师 : 独立负责模块<br>技术方案设计
    高级工程师 : 系统架构设计<br>技术难题攻关
    技术专家 : 技术规划<br>团队指导
    架构师 : 系统架构设计<br>技术选型决策
    技术总监 : 技术团队管理<br>技术战略规划`
            },
            {
                id: 'timeline-team',
                title: '团队发展时间线',
                description: '技术团队的建设发展历程',
                code: `timeline
    title 技术团队发展历程
    
    初创期 : 3人核心团队<br>快速原型开发
    成长期 : 扩展到10人<br>建立开发规范
    成熟期 : 20人团队<br>专业化分工
    扩张期 : 建立多个小组<br>跨地域协作
    优化期 : 流程自动化<br>效率提升
    引领期 : 技术创新<br>行业影响力`
            }
        ]
    },
    'c4': {
        name: 'C4图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <rect x="7" y="7" width="10" height="10" rx="1" />
                <line x1="12" y1="7" x2="12" y2="5" />
                <line x1="12" y1="19" x2="12" y2="17" />
                <line x1="5" y1="12" x2="7" y2="12" />
                <line x1="19" y1="12" x2="17" y2="12" />
            </svg>`,
        demos: [
            {
                id: 'c4-system',
                title: '系统上下文图',
                description: '企业级系统的架构概览',
                code: `C4Context
    title 企业管理系统上下文
    
    Person(内部员工, "系统使用者")
    Person(外部客户, "服务消费者")
    System(核心业务系统, "处理核心业务逻辑")
    System_Ext(支付系统, "第三方支付服务")
    System_Ext(短信服务, "消息通知服务")
    System_Ext(文件存储, "云存储服务")
    
    Rel(内部员工, 核心业务系统, "使用管理系统")
    Rel(外部客户, 核心业务系统, "访问服务接口")
    Rel(核心业务系统, 支付系统, "调用支付API")
    Rel(核心业务系统, 短信服务, "发送通知消息")
    Rel(核心业务系统, 文件存储, "存储业务文件")`
            },
            {
                id: 'c4-container',
                title: '容器图',
                description: '系统内部容器级别的架构',
                code: `C4Container
    title 电商系统容器图
    
    Person(顾客, "在线购物用户")
    System_Boundary(电商系统, "电子商务平台") {
        Container(webapp, "Web应用", "React", "用户界面")
        Container(spa, "单页应用", "Angular", "管理后台")
        Container(mobileapp, "移动应用", "iOS/Android", "移动客户端")
        Container(api, "API网关", "Spring Cloud Gateway", "API路由和认证")
        Container(auth, "认证服务", "OAuth2", "用户认证授权")
        Container(order, "订单服务", "Java", "订单处理")
        Container(product, "商品服务", "Java", "商品管理")
        Container(payment, "支付服务", "Java", "支付处理")
        Container(db, "数据库", "MySQL", "数据存储")
        Container(cache, "缓存", "Redis", "缓存服务")
    }
    
    System_Ext(payment_gateway, "支付网关", "第三方支付")
    System_Ext(sms_service, "短信服务", "消息通知")
    
    Rel(顾客, webapp, "使用")
    Rel(顾客, mobileapp, "使用")
    Rel(webapp, api, "API调用")
    Rel(mobileapp, api, "API调用")
    Rel(api, auth, "认证")
    Rel(api, order, "调用")
    Rel(api, product, "调用")
    Rel(api, payment, "调用")
    Rel(payment, payment_gateway, "支付请求")
    Rel(order, sms_service, "发送通知")`
            },
            {
                id: 'c4-component',
                title: '组件图',
                description: '服务内部组件级别的设计',
                code: `C4Component
    title 订单服务组件图
    
    Container_Boundary(订单服务, "订单处理微服务") {
        Component(OrderController, "订单控制器", "Spring MVC", "处理HTTP请求")
        Component(OrderService, "订单服务", "Spring Service", "业务逻辑")
        Component(OrderRepository, "订单仓库", "JPA", "数据访问")
        Component(InventoryClient, "库存客户端", "Feign", "调用库存服务")
        Component(PaymentClient, "支付客户端", "Feign", "调用支付服务")
        Component(NotificationService, "通知服务", "Spring Service", "发送通知")
    }
    
    ContainerDb(订单数据库, "MySQL", "订单数据存储")
    Container(库存服务, "库存服务", "Java", "库存管理")
    Container(支付服务, "支付服务", "Java", "支付处理")
    Container(消息服务, "消息服务", "Java", "消息队列")
    
    Rel(OrderController, OrderService, "调用")
    Rel(OrderService, OrderRepository, "使用")
    Rel(OrderService, InventoryClient, "检查库存")
    Rel(OrderService, PaymentClient, "发起支付")
    Rel(OrderService, NotificationService, "发送通知")
    Rel(OrderRepository, 订单数据库, "读写")
    Rel(InventoryClient, 库存服务, "HTTP调用")
    Rel(PaymentClient, 支付服务, "HTTP调用")
    Rel(NotificationService, 消息服务, "发送消息")`
            },
            {
                id: 'c4-deployment',
                title: '部署图',
                description: '系统在基础设施上的部署架构',
                code: `C4Deployment
    title 系统部署架构
    
    Deployment_Node(云服务商, "阿里云", "云计算平台") {
        Deployment_Node(区域, "华东1", "主区域") {
            Deployment_Node(负载均衡, "SLB", "负载均衡器") {
                ContainerInstance(web1, "Web服务器1", "Nginx")
                ContainerInstance(web2, "Web服务器2", "Nginx")
            }
            
            Deployment_Node(应用集群, "应用服务器集群", "ECS") {
                ContainerInstance(app1, "应用服务器1", "Tomcat")
                ContainerInstance(app2, "应用服务器2", "Tomcat")
                ContainerInstance(app3, "应用服务器3", "Tomcat")
            }
            
            Deployment_Node(数据库集群, "数据库集群", "RDS") {
                ContainerInstance(db_master, "主数据库", "MySQL")
                ContainerInstance(db_slave, "从数据库", "MySQL")
            }
            
            Deployment_Node(缓存集群, "缓存集群", "Redis") {
                ContainerInstance(redis1, "Redis节点1", "Redis")
                ContainerInstance(redis2, "Redis节点2", "Redis")
            }
        }
        
        Deployment_Node(备份区域, "华北2", "备份区域") {
            Deployment_Node(备份数据库, "备份数据库", "RDS") {
                ContainerInstance(backup_db, "备份实例", "MySQL")
            }
        }
    }
    
    Rel(web1, app1, "请求转发")
    Rel(web2, app2, "请求转发")
    Rel(app1, db_master, "读写")
    Rel(app2, db_master, "读写")
    Rel(db_master, db_slave, "数据同步")
    Rel(db_master, backup_db, "异地备份")
    Rel(app1, redis1, "缓存读写")
    Rel(app2, redis2, "缓存读写")`
            },
            {
                id: 'c4-microservices',
                title: '微服务架构图',
                description: '微服务系统的完整架构视图',
                code: `C4Container
    title 微服务系统架构
    
    Person(用户, "系统用户")
    Person(管理员, "系统管理员")
    
    System_Boundary(微服务系统, "分布式微服务架构") {
        Container(gateway, "API网关", "Spring Cloud Gateway", "统一入口")
        Container(auth, "认证服务", "OAuth2", "身份认证")
        Container(user, "用户服务", "Spring Boot", "用户管理")
        Container(order, "订单服务", "Spring Boot", "订单处理")
        Container(product, "商品服务", "Spring Boot", "商品管理")
        Container(inventory, "库存服务", "Spring Boot", "库存管理")
        Container(payment, "支付服务", "Spring Boot", "支付处理")
        Container(notification, "通知服务", "Spring Boot", "消息通知")
        Container(search, "搜索服务", "Elasticsearch", "全文搜索")
        Container(config, "配置中心", "Spring Cloud Config", "配置管理")
        Container(registry, "服务注册中心", "Eureka", "服务发现")
    }
    
    ContainerDb(user_db, "用户数据库", "MySQL", "用户数据")
    ContainerDb(order_db, "订单数据库", "MySQL", "订单数据")
    ContainerDb(product_db, "商品数据库", "MySQL", "商品数据")
    ContainerDb(es, "搜索引擎", "Elasticsearch", "搜索索引")
    Container_MessageQueue(mq, "消息队列", "RabbitMQ", "异步通信")
    
    Rel(用户, gateway, "API调用")
    Rel(管理员, gateway, "API调用")
    Rel(gateway, auth, "认证校验")
    Rel(gateway, user, "服务路由")
    Rel(gateway, order, "服务路由")
    Rel(gateway, product, "服务路由")
    Rel(user, user_db, "数据持久化")
    Rel(order, order_db, "数据持久化")
    Rel(product, product_db, "数据持久化")
    Rel(product, search, "建立索引")
    Rel(order, inventory, "库存检查")
    Rel(order, payment, "支付处理")
    Rel(order, mq, "发送通知事件")
    Rel(mq, notification, "消费通知")`
            }
        ]
    },
    'quadrant': {
        name: '四象限图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="2" x2="12" y2="22" />
                <line x1="2" y1="12" x2="22" y2="12" />
            </svg>`,
        demos: [
            {
                id: 'quadrant-priority',
                title: '任务优先级矩阵',
                description: '基于紧急性和重要性的任务分类',
                code: `quadrantChart
    title "工作任务优先级分析"
    x-axis "低紧急性" --> "高紧急性"
    y-axis "高重要性" --> "低重要性"
    quadrant-1 "重要且紧急"
    quadrant-2 "重要不紧急"
    quadrant-3 "不重要但紧急"
    quadrant-4 "不重要不紧急"
    ["客户投诉处理"]: [0.8, 0.9]
    ["项目deadline"]: [0.7, 0.8]
    ["系统优化"]: [0.3, 0.7]
    ["团队培训"]: [0.2, 0.6]
    ["日常会议"]: [0.6, 0.3]
    ["邮件回复"]: [0.5, 0.4]
    ["社交活动"]: [0.2, 0.2]
    ["浏览新闻"]: [0.1, 0.1]`
            },
            {
                id: 'quadrant-technology',
                title: '技术选型矩阵',
                description: '技术评估与选型决策框架',
                code: `quadrantChart
    title "技术栈选型评估"
    x-axis "低成熟度" --> "高成熟度"
    y-axis "高价值" --> "低价值"
    quadrant-1 "核心采用"
    quadrant-2 "战略投资"
    quadrant-3 "谨慎使用"
    quadrant-4 "避免使用"
    ["Spring Boot"]: [0.9, 0.8]
    ["React"]: [0.8, 0.7]
    ["Vue.js"]: [0.7, 0.6]
    ["微服务架构"]: [0.6, 0.8]
    ["Serverless"]: [0.4, 0.7]
    ["新技术A"]: [0.3, 0.6]
    ["遗留系统B"]: [0.8, 0.3]
    ["过时技术C"]: [0.2, 0.2]`
            },
            {
                id: 'quadrant-risk',
                title: '项目风险矩阵',
                description: '项目风险的概率与影响评估',
                code: `quadrantChart
    title "项目风险评估矩阵"
    x-axis "低概率" --> "高概率"
    y-axis "高影响" --> "低影响"
    quadrant-1 "严重风险"
    quadrant-2 "重大风险"
    quadrant-3 "中等风险"
    quadrant-4 "轻微风险"
    ["技术债务"]: [0.7, 0.8]
    ["人员流失"]: [0.4, 0.9]
    ["需求变更"]: [0.8, 0.6]
    ["第三方依赖"]: [0.5, 0.5]
    ["性能问题"]: [0.3, 0.7]
    ["安全漏洞"]: [0.2, 0.8]
    ["沟通问题"]: [0.6, 0.4]
    ["工具故障"]: [0.4, 0.3]`
            },
            {
                id: 'quadrant-skill',
                title: '技能评估矩阵',
                description: '团队成员技能水平与业务价值评估',
                code: `quadrantChart
    title "团队技能矩阵分析"
    x-axis "低熟练度" --> "高熟练度"
    y-axis "高业务价值" --> "低业务价值"
    quadrant-1 "核心能力"
    quadrant-2 "关键发展"
    quadrant-3 "基础能力"
    quadrant-4 "次要技能"
    ["Java开发"]: [0.9, 0.8]
    ["架构设计"]: [0.7, 0.9]
    ["DevOps"]: [0.6, 0.7]
    ["前端框架"]: [0.8, 0.6]
    ["数据库优化"]: [0.5, 0.7]
    ["云原生"]: [0.4, 0.8]
    ["项目管理"]: [0.3, 0.6]
    ["测试自动化"]: [0.7, 0.5]`
            },
            {
                id: 'quadrant-feature',
                title: '功能优先级矩阵',
                description: '产品功能的价值与实现成本评估',
                code: `quadrantChart
    title "产品功能优先级评估"
    x-axis "低实现成本" --> "高实现成本"
    y-axis "高用户价值" --> "低用户价值"
    quadrant-1 "快速获胜"
    quadrant-2 "战略投资"
    quadrant-3 "酌情考虑"
    quadrant-4 "避免开发"
    ["登录优化"]: [0.3, 0.8]
    ["性能提升"]: [0.7, 0.9]
    ["新支付方式"]: [0.6, 0.7]
    ["社交分享"]: [0.4, 0.5]
    ["AI推荐"]: [0.8, 0.8]
    ["多语言"]: [0.7, 0.6]
    ["主题换肤"]: [0.2, 0.3]
    ["复杂报表"]: [0.8, 0.4]`
            }
        ]
    },
    'kanban': {
        name: '看板图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                <line x1="9" y1="3" x2="9" y2="17" />
                <line x1="15" y1="3" x2="15" y2="17" />
                <line x1="2" y1="9" x2="22" y2="9" />
                <line x1="2" y1="15" x2="22" y2="15" />
            </svg>`,
        demos: [
            {
                id: 'kanban-dev',
                title: '开发任务看板',
                description: '敏捷开发团队的任务看板',
                code: `kanban
    title 敏捷开发看板
    
    %% 定义列
    Backlog: 5
    Analysis: 3
    Development: 4
    Testing: 2
    Done: 8
    
    %% 定义任务
    section Backlog
        需求收集: 5
        技术调研: 3
        架构设计: 2
    
    section Analysis
        用户故事拆分: 3
        接口设计: 2
        数据库设计: 1
    
    section Development
        用户认证模块: 5
        订单处理功能: 8
        支付集成: 3
        报表生成: 5
    
    section Testing
        单元测试: 3
        集成测试: 5
    
    section Done
        环境搭建: 2
        基础框架: 5
        用户管理: 8
        商品展示: 3
        购物车: 5
        基础订单: 8
        简单支付: 3
        基础报表: 5`
            },
            {
                id: 'kanban-project',
                title: '项目进度看板',
                description: '项目管理中的多项目进度看板',
                code: `kanban
    title 多项目进度看板
    
    %% 项目状态列
    规划中: 3
    进行中: 4
    测试中: 2
    已完成: 3
    
    %% 项目任务
    section 规划中
        电商平台重构: 8
        移动端开发: 5
        AI功能集成: 3
    
    section 进行中
        用户系统升级: 5
        支付系统优化: 8
        性能监控: 3
        安全加固: 5
    
    section 测试中
        新搜索功能: 3
        推荐算法: 5
    
    section 已完成
        基础架构: 8
        权限系统: 5
        日志系统: 3`
            }
        ]
    },
    'git': {
        name: 'Git图',
        icon: `
            <svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10" />
                <path d="M14.5 8.5L12 6l-2.5 2.5" />
                <path d="M9.5 15.5L12 18l2.5-2.5" />
                <line x1="12" y1="6" x2="12" y2="18" />
            </svg>`,
        demos: [
            {
                id: 'git-branch',
                title: 'Git分支策略',
                description: '团队协作的Git分支管理策略',
                code: `gitGraph
    commit id: "init"
    branch develop
    checkout develop
    commit id: "feat: 基础框架"
    commit id: "feat: 用户模块"
    branch feature/auth
    checkout feature/auth
    commit id: "feat: 登录功能"
    commit id: "feat: 权限控制"
    checkout develop
    merge feature/auth id: "merge auth"
    branch release/v1.0
    checkout release/v1.0
    commit id: "fix: 修复bug"
    checkout main
    merge release/v1.0 id: "release v1.0"
    checkout develop
    merge release/v1.0 id: "sync develop"
    branch hotfix/critical
    checkout hotfix/critical
    commit id: "fix: 紧急修复"
    checkout main
    merge hotfix/critical id: "apply hotfix"
    checkout develop
    merge hotfix/critical id: "sync hotfix"`
            }
        ]
    }
};